<template>
    <div class="wrapper">
        <swiper :options="swiperOption"  v-if="showSwiper">
            <swiper-slide class="swiper-img" v-for="item in list" :key="item.id" >
              <img :src="item.imgUrl">
            </swiper-slide>
          <div class="swiper-pagination"  slot="pagination"></div>
            <!--<div class="swiper-button-prev" slot="button-prev"></div>-->
            <!--<div class="swiper-button-next" slot="button-next"></div>-->
            <!--<div class="swiper-scrollbar"   slot="scrollbar"></div>滚动条-->

        </swiper>
    </div>

</template>

<script>
    export default {
        name: "HomeSwiper",
        data:function(){
              return {
                swiperOption:{
                  pagination:{el:" .swiper-pagination"},
                  autoplay:false,
                  loop:true

                }
              }
        },
        props:{
          list:Array
        },
      computed:{
          showSwiper() {
          return this.list.length
        }

      }
    }
</script>
<style lang="stylus" scoped>
   .wrapper >>> .swiper-pagination-bullet-active
    background:#ffaa02 !important/*改变小点颜色。需要>>> 穿透到swiper组件中去应用这个样式*/
  .wrapper
    width: 100%
    height:0/*目的是为了当网速慢的时候位置不跳动*/
    padding-bottom:52.463%/*表示为父级宽度的52.463%*/
    overflow:hidden
    .swiper-img
      img
       width:100%
</style>
